<template>
  <div class="PoitionEdit">
    <a-form :form="form">
      <a-form-item label="点位名称" :label-col="{ span: 3}" :wrapper-col="{ span: 5}">
        <a-input
          placeholder="测试点位001"
          v-decorator="[
          'pointName',
          {rules: [{ required: true, message: '请输入模板名称!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="支付类型" :label-col="{ span: 3}" :wrapper-col="{ span: 10}">
        <a-radio-group v-decorator="['payment']">
          <a-radio :value="1">全部</a-radio>
          <a-radio :value="2">仅支持微信支付</a-radio>
          <a-radio value="3">仅支持支付宝支付</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="点位地址" :label-col="{ span: 3}" :wrapper-col="{ span: 8}">
        <a-cascader
          :options="this.$store.state.provincesInfo"
          :fieldNames="{ label: 'name', value: 'code', children: 'childs' }"
          @change="onChange"
          placeholder="请选择"
          v-decorator="[
          'provinces',
          {rules: [{ required: true, message: '请输入点位地址!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item style="margin-left:12.5%" :wrapper-col="{ span: 8}">
        <a-input
          placeholder="详细地址，精确到楼层摊位"
          v-decorator="[
          'detailedAddress',
          {rules: [{ required: true, message: '请输入详细地址!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="场景" :label-col="{ span: 3}" :wrapper-col="{ span: 16}">
        <a-radio-group v-decorator="['scene']">
          <a-radio :value="1">工厂/工业园</a-radio>
          <a-radio :value="2">大学/大学城</a-radio>
          <a-radio :value="3">中小学</a-radio>
          <a-radio :value="4">医院</a-radio>
          <a-radio :value="5">商圈/商场</a-radio>
          <a-radio :value="6">旅游景点</a-radio>
          <a-radio :value="7">公寓/酒店</a-radio>
          <a-radio :value="8">汽车站</a-radio>
          <a-radio :value="9">火车站</a-radio>
          <a-radio :value="10">机场</a-radio>
          <a-radio :value="11">港口/码头</a-radio>
          <a-radio :value="12">地铁站</a-radio>
          <a-radio :value="13">公交站台</a-radio>
          <a-radio :value="14">社区</a-radio>
          <a-radio :value="15">办公室/写字楼</a-radio>
          <a-radio :value="16">4S店</a-radio>
          <a-radio :value="17">其他</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="点位人数" :label-col="{ span: 3}" :wrapper-col="{ span: 16}">
        <a-radio-group v-decorator="['pointPeopleNumber']">
          <a-radio :value="1">50人以下</a-radio>
          <a-radio :value="2">51~100人</a-radio>
          <a-radio :value="3">101~150人</a-radio>
          <a-radio :value="4">151~200人</a-radio>
          <a-radio :value="5">200人以上</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="用户性别结构" :label-col="{ span: 3}" :wrapper-col="{ span: 16}">
        <a-radio-group v-decorator="['userSex']">
          <a-radio :value="1">男多女少</a-radio>
          <a-radio :value="2">女多男少</a-radio>
          <a-radio :value="3">男女差不多</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="用户主要年龄段" :label-col="{ span: 3}" :wrapper-col="{ span: 16}">
        <a-checkbox-group v-decorator="['userAge']" style="width: 100%;">
          <a-checkbox :value="1">20岁以下</a-checkbox>
          <a-checkbox :value="2">20~30岁</a-checkbox>
          <a-checkbox :value="3">30~40岁</a-checkbox>
          <a-checkbox :value="4">40岁以上</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="是否有竞品" :label-col="{ span: 3}" :wrapper-col="{ span: 16}">
        <a-radio-group v-decorator="['isCompetingGoods']">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="竞品台数" :label-col="{ span: 3}" :wrapper-col="{ span: 5}">
        <a-input
          placeholder="请输入台数"
          v-decorator="[
          'CompetingGoodsNumber',
          {rules: [{ required: true, message: '请输入竞品台数!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="备注" :label-col="{ span: 3}" :wrapper-col="{ span: 5}">
        <a-textarea
          placeholder="请输入台数"
          v-decorator="[
          'remark',
          {rules: [{ required: true, message: '请输入竞品台数!' }]}
        ]"
        />
      </a-form-item>
      <a-button type="primary" style="margin-left:8%" @click="listEdit()">确认保存</a-button>
    </a-form>
  </div>
</template>

<script>
export default {
  name: "PoitionEdit",
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  watch: {},
  computed: {},
  methods: {
    onChange(value) {
      console.log(value);
    },

    // 点位信息回显
    editShowPos() {
      this.axios
        .post(this.baseUrl + "/pos/editShowPos", {
          loginToken: this.$store.state.loginToken,
          posId: this.$store.state.editId
        })
        .then(response => {
          // console.log(response);
          this.editInfo = response.data.data;
          this.form.setFieldsValue({
            pointName: this.editInfo.posName,
            payment: this.editInfo.paymentType,
            detailedAddress: this.editInfo.address,
            scene: this.editInfo.scene,
            pointPeopleNumber: this.editInfo.population,
            userSex: this.editInfo.sexStructure,
            userAge: this.editInfo.ageStructure,
            isCompetingGoods: this.editInfo.hasCompetitor,
            CompetingGoodsNumber: this.editInfo.competitorDevNumbers,
            remark: this.editInfo.description
          });
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 省市区的信息
    findRegionListByPid() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/pos/findRegionListByPid", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 编辑点位
    listEdit() {
      var values = this.form.getFieldsValue();
      this.axios
        .put(this.baseUrl + "/pos/edit", {
          loginToken: this.$store.state.loginToken,
          //点位id
          posId: this.$store.state.editId,
          // addrCity: this.addrCity,
          // addrDistinct: this.addrDistinct,
          // addrProvince: this.addrProvince,
          // address: values.detailedAddress,
          //点位名称
          posName: values.pointName,
          //点位地址
          addressExt: values.detailedAddress,
          //支付方式
          paymentType: values.payment,
          //网点商业场景
          scene: values.scene
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$router.push({
              path: "/home/networkadmin/poitionadmin"
            });
            this.$message.info("编辑成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.editShowPos();
    this.findRegionListByPid();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.PoitionEdit {
  width: 100%;
}
</style>
